<template>
  <div class="header-box">
    <div class="nav-topbar">
      <div class="container">
        <a href="">欢太品牌</a>
        <a href="">欢太云服务</a>
        <a href="">软件商城</a>
        <a href="">健康</a>
        <a href="">欢太商城APP</a>
        <a href="javascript:;" @click="goLogin">登陆</a>
        <a href="javascript:;" @click="goRegister">注册</a>
      </div>
    </div>
    <div id="header">
      <ul>
        <li class="logo" v-for="item in huantailogo" :key="item.id">
          <a href><img v-lazy="item.s_goods_photos[0].path" alt="" /></a>
        </li>

        <li class="nav-item">
          <span>OPPO专区</span>
          <!--hover出来的div -->
          <div class="children">
            <ul>
              <li class="product" v-for="item in oppolist" :key="item.id">
                <a href="">
                  <div class="pro-img">
                    <img v-lazy="item.s_goods_photos[0].path" alt="" />
                  </div>
                  <div class="pro-name">{{ item.name }}</div>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <span>一加专区</span>
          <div class="children">
            <ul>
              <li class="product" v-for="item in yijialist" :key="item.id">
                <a href="">
                  <div class="pro-img">
                    <img v-lazy="item.s_goods_photos[0].path" alt="" />
                  </div>
                  <div class="pro-name">{{ item.name }}</div>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <span>realme专区</span>
          <div class="children">
            <ul>
              <li class="product" v-for="item in remlist" :key="item.id">
                <a href="">
                  <div class="pro-img">
                    <img v-lazy="item.s_goods_photos[0].path" alt="" />
                  </div>
                  <div class="pro-name">{{ item.name }}</div>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <span>智能硬件</span>
          <div class="children">
            <ul>
              <li class="product" v-for="item in hardware" :key="item.id">
                <a href="">
                  <div class="pro-img">
                    <img v-lazy="item.s_goods_photos[0].path" alt="" />
                  </div>
                  <div class="pro-name">{{ item.name }}</div>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <span>智美心品</span>
          <div class="children">
            <ul>
              <li class="product" v-for="item in heartlist" :key="item.id">
                <a href="">
                  <div class="pro-img">
                    <img v-lazy="item.s_goods_photos[0].path" alt="" />
                  </div>
                  <div class="pro-name">{{ item.name }}</div>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <span>品牌</span>
          <div class="children">
            <ul>
              <li class="product" v-for="item in brandlist" :key="item.id">
                <a href="">
                  <div class="pro-img">
                    <img v-lazy="item.s_goods_photos[0].path" alt="" />
                  </div>
                  <div class="pro-name">{{ item.name }}</div>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item2">
          <div class="item-down">
            <img v-lazy="user_icon" alt="" @click="downup" />
            <div class="down-box" :class="{ 'down-block': isblock == false }">
              <div class="down-cart" @click="gotocart">
                <i class="el-icon-shopping-cart-full"></i
                ><a
                  >购物车 <span>{{ `(${cartlist.length})` }}</span></a
                >
              </div>
              <div class="down-login">
                <i class="el-icon-s-custom"></i
                ><a class="login-user" v-show="loginshow" @click="loginUser"
                  >登陆账户</a
                ><a class="user-centent" v-show="usershow">个人中心</a>
              </div>
              <div class="down-out">
                <i class="el-icon-switch-button"></i
                ><a href="" @click="loginOut">退出账户</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getGoods, getDetailgoods, getCart2 } from "../assets/request";
export default {
  data() {
    return {
      loginshow: true,
      usershow: false,
      isblock: true,
      goods: [],
      huantailogo: [],
      oppolist: [],
      yijialist: [],
      remlist: [],
      hardware: [],
      heartlist: [],
      brandlist: [],
      user_icon: "",
      cartlist: [],
    };
  },
  async created() {
    let icon = await getDetailgoods(967);
    this.user_icon = icon.s_goods_photos[0].path;
    let res = await getGoods({
      project_id: 78,
      limit: 100,
    });
    this.goods = res.rows.sort((a, b) => a.id - b.id);
    this.huantailogo = this.goods.slice(0, 1);
    this.oppolist = this.goods.slice(1, 8);
    this.yijialist = this.goods.slice(8, 15);
    this.remlist = this.goods.slice(15, 21);
    this.hardware = this.goods.slice(21, 26);
    this.heartlist = this.goods.slice(26, 31);
    this.brandlist = this.goods.slice(31, 34);
    //  console.log( this.phoneList);
    let token = sessionStorage.getItem("token");
    if (token) {
      this.cartlist = await getCart2({ project_id: 78 });
      this.usershow = true;
      this.loginshow = false;
    } else {
      this.usershow = false;
      this.loginshow = true;
    }
  },
  methods: {
    goLogin() {
      this.$router.push("/login");
    },
    goRegister() {
      this.$router.push("/register");
    },
    downup() {
      this.isblock = !this.isblock;
    },
    loginUser() {
      this.$router.push("/login");
    },
    loginOut() {
      sessionStorage.removeItem("token");
    },
    gotocart() {
      this.$router.push("/card");
    },
  },
};
</script>

<style lang="scss" scoped>
.header-box {
  width: 100%;
  height: 138px;
  position: relative;
  border-bottom: 1px solid rgb(229, 229, 229);
  .nav-topbar {
    width: 100%;
    height: 50px;
    background: #000;
    box-sizing: border-box;
    .container {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      a {
        font-size: 14px;
        line-height: 50px;
        color: rgba(241, 241, 241, 0.8);
        padding-right: 70px;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
      }
    }
  }
  #header {
    width: 1200px;
    height: 138px;
    // border: 1px solid black;
    // background-color: skyblue;
    margin: 0 auto;

    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .nav-item {
        font-size: 20px;
        &:hover {
          color: orange;
          cursor: pointer;
          .children {
            height: 220px;
          }
          .mask {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background-color: rgb(0, 0, 0, 0.5);
            z-index: 99;
          }
        }
        .children {
          width: 100%;
          // height: 220px;
          height: 0;
          position: absolute;
          left: 0;
          top: 138px;
          transition: all 0.5s;
          overflow: hidden;
          background-color: #fff;
          box-shadow: 4px 6px 6px 0px rgba(0, 0, 0, 0.11);
          z-index: 999;
          ul {
            display: flex;
            justify-content: space-around;
            width: 1200px;
            margin: auto;
            .product {
              width: 15%;
              height: 220px;
              text-align: center;
              &:hover {
                .pro-name {
                  color: gray;
                }
              }
              .pro-img {
                width: 92px;
                height: 110px;
                margin: 0 auto;
                margin-top: 26px;
                img {
                  width: auto;
                  height: 111px;
                  margin-left: -10px;
                }
              }
              .pro-name {
                line-height: 52px;
              }
            }
          }
        }
      }
      .nav-item2 {
        font-size: 15px;
        color: #333;
        .item-down {
          img {
            vertical-align: middle;
            cursor: pointer;
          }
          .down-box {
            width: 270px;
            height: 214px;
            background: #fff;
            position: absolute;
            top: 116px;
            right: 224px;
            z-index: 9999;
            box-shadow: 0 1px 2px 0 rgba(102, 102, 102, 0.5);
            border-radius: 4px;
            -webkit-box-shadow: 0 1px 2px 0 rgba(102, 102, 102, 0.5);
            display: none;

            .down-cart {
              padding: 18px 0;
              margin: 0 28px;
              box-sizing: border-box;
              border-bottom: 1px rgba(0, 0, 0, 0.082) solid;
              cursor: pointer;
              &:hover {
                opacity: 0.6;
              }
              i {
                display: inline-block;
                margin: 0 20px 0 10px;
                font-size: 25px;
                vertical-align: middle;
              }
              a {
                font-size: 16px;
                display: inline-block;
                vertical-align: middle;
                span {
                  color: #ff763d;
                }
              }
            }
            .down-login {
              padding: 18px 0;
              margin: 0 28px;
              box-sizing: border-box;
              cursor: pointer;
              border-bottom: 1px rgba(0, 0, 0, 0.082) solid;
              &:hover {
                opacity: 0.6;
              }
              i {
                display: inline-block;
                margin: 0 20px 0 10px;
                font-size: 25px;
                vertical-align: middle;
              }
              .login-user {
                font-size: 16px;
                display: inline-block;
                vertical-align: middle;
              }
              .user-centent {
                font-size: 16px;
                display: inline-block;
                vertical-align: middle;
              }
            }
            .down-out {
              padding: 18px 0;
              margin: 0 28px;
              cursor: pointer;
              box-sizing: border-box;
              border-bottom: 1px rgba(0, 0, 0, 0.082) solid;
              &:hover {
                opacity: 0.6;
              }
              i {
                display: inline-block;
                margin: 0 20px 0 10px;
                font-size: 25px;
                vertical-align: middle;
              }
              a {
                font-size: 16px;
                display: inline-block;
                vertical-align: middle;
              }
            }
          }
          .down-block {
            display: block;
            transition: opacity 0.3s ease 0s, max-height 0s linear 0s,
              visibility 0s ease 0s;
          }
        }
      }
      .logo {
        padding-right: 60px;
        img {
          height: 88px;
        }
      }
    }
  }
}
</style>